<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <link rel="stylesheet" type="text/css" href="css/icons.css" />
    <link rel="stylesheet" type="text/css" href="css/hoverdemo.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="js/mo.min.js"></script>
    <script src="js/demo.js"></script>

    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            //定义一个为状态判断的变量
            var status;
            //获取url上的id
            var params = getParams();
            //创建变量接受作者id
            var authorId;

            //发送请求修改访问次数
            $.ajax({
                type:"put",
                url:"/travels/watchNum",
                data:{userId:params.id,num:1}
            })

            //判断是否有id
            if (params.id) {
                //发送请求 获取游记的内容
                $.get("/travels/" + params.id, function (data) {
                    authorId = data.author.id;

                    //判断访问个人主页的访问者是谁，如果是登录者就不显示关注按钮
                    if (authorId == user.id) {
                        $("#followBtn").css("display", "none");
                    }

                    //粉丝数和关注数查询显示
                    $.get("/users/" + authorId + "/attentionsCount", function (data) {
                        console.log(data);
                        $(".fans").html(data.fans);
                    })

                    //判断登录者是否是这个主页用户的粉丝
                    $.get("/users/" + authorId + "/attention", {"fanId": user.id}, function (data) {
                        if (data) {
                            $("#followBtn").html("关注");
                            $("#followBtn").attr("data-type", 1);
                        } else {
                            $("#followBtn").html("取关");
                            $("#followBtn").attr("data-type", 0);
                        }
                    })

                    //关注按钮点击
                    $("#followBtn").click(function () {
                        $("#followBtn").attr("disabled", true);
                        var type = $(this).data("type");
                        console.log(type);
                        var json = {};
                        console.log(json);
                        if (type == 0) {
                            $.ajax({
                                type: "post",
                                url: "/attentions",
                                data: {
                                    _method: "DELETE",
                                    "fan.id": user.id,
                                    "attention.id": authorId
                                },
                                dataType: "json",
                                success: function (data) {
                                    if (data.success) {
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '取消关注成功',
                                            autoClose: 1000,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                        setTimeout(function () {
                                            window.location.reload();
                                        }, 1000)
                                    } else {
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '关注了我还想取消？取消失败',
                                            autoClose: 1000,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                    }
                                }
                            });
                        } else {
                            $.ajax({
                                type: "POST",
                                url: "/attentions",
                                data: {
                                    "fan.id": user.id,
                                    "attention.id": authorId
                                },
                                dataType: "json",
                                success: function (data) {
                                    if (data.success) {
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '关注成功',
                                            autoClose: 1000,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                        setTimeout(function () {
                                            window.location.reload();
                                        }, 1000)
                                    } else {
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '你不是女粉了，关注失败',
                                            autoClose: 1000,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                    }
                                }
                            });
                        }
                    })

                    //视图渲染
                    console.log(data);
                    $(".travels").renderValues(data);

                });
            }

            //点击评论，跳转评论页面
            $("#commentBtn").click(function () {
                window.location.href = "/mine/travelComment.html?id=" + params.id;
            })
                //获取当前用户的id

                var user = JSON.parse(sessionStorage.getItem("user"));
                //发送请求获取查找当前攻略是否被收藏
            if(user != null){
                $.get("/collect/"+user.id+"/"+params.id,function (data) {
                    if(data){
                        //当返回为存在时
                        $(".star i").removeClass("fa-star-o").addClass("fa-star");
                        $(".star i").css("color","#a948b8");
                        status = 1;
                    }else{
                        //当返回的数据为不存在时
                        $(".star i").removeClass("fa-star").addClass("fa-star-o");
                        $(".star i").css("color","black");
                        status = 0;
                    }
                })

                /** 页面载入判断点赞状态 ckw**/
                var user = JSON.parse(sessionStorage.getItem("user"));
                $.get("travelLike/getStatus?travelId="+params.id+"&likerId="+user.id,function (data) {
                    if(data==1){
                        $("#likeBtn").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                        $("#likeBtn").css("color","red");
                    }
                })
            }



            //绑定点击事件
            $("#collectBtn").click(function () {
                //判断当前用户是否登录
            if (user != null){
                if(status == 1){
                    status = 0;
                //发送ajax请求,删除对应的关系
                $.ajax({
                    url:"collect",
                    method:"post",
                    data:{
                        _method : "delete",
                        userId : user.id,
                        travelId : params.id
                      },
                    dataType:"json",
                    success : function (data) {
                        //当星星的状态为激活的状态
                        $(".star i").removeClass("fa-star").addClass("fa-star-o");
                        $(".star i").css("color","black");
                        var toast5 = $(document).dialog({
                            type : 'toast',
                            infoIcon: '../imager/2.gif',
                            infoText: '正在加载中',
                        });

                        setTimeout(function () {
                            toast5.update({
                                infoIcon: '../imager/4.gif',
                                infoText: '取消成功',
                                autoClose: 1500,
                            });
                        }, 1500);
                    }
                })
                }else {
                        status = 1;
                        //发送ajax请求,保存对应的关系
                        $.ajax({
                            url:"collect",
                            method:"post",
                            data:{
                                userId : user.id,
                                travelId : params.id
                            },
                            dataType:"json",
                            success : function (data) {
                                //当星星的状态为未激活的状态
                                $(".star i").removeClass("fa-star-o").addClass("fa-star");
                                $(".star i").css("color","yellow");
                                var toast5 = $(document).dialog({
                                    type : 'toast',
                                    infoIcon: '../imager/1.gif',
                                    infoText: '正在加载中',
                                });

                                setTimeout(function () {
                                    toast5.update({
                                        infoIcon: '../imager/3.jpg',
                                        infoText: '关注成功',
                                        autoClose: 1500,
                                    });
                                }, 1500);
                            }
                        })
                    }
                } else {
                    //未登陆时,跳转到登录页面
                    window.location.href = "login.html";
                }
            })

            //获取当前游记的总条数
            $.get("users/travel",{userId:user.id},function (data) {
                $("#travelNum").html(data);
            })


            /**给点赞按钮绑定点击事件 ckw**/
            $("#likeBtn").click(function () {
                var click = $(this);
                var split = click.attr("class").split(" ");
                var user = JSON.parse(sessionStorage.getItem("user"));
                if(user){
                    if(split[2] == "fa-thumbs-o-up"){   //未点赞
                        $.post("travelLike/addLike",{travelId:params.id,likerId:user.id},function (data) {
                            if (data.success){
                                click.removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                                click.css("color","red");
                            }
                        })

                        //点赞按钮特效
                        var x = 100;
                        var y = 900;
                        var num = Math.floor(Math.random() * 5 + 1);
                        var index=$('.demo').children('img').length;
                        var rand = parseInt(Math.random() * (x - y + 1) + y);

                        $("#zan").append("<img src=''>");
                        $('img:eq(' + index + ')').attr('src','img/'+num+'.gif')


                        $("img").animate({
                            bottom:"400",
                            opacity:"0",
                            left: rand,
                        },7000)

                    }else {
                        $.post("travelLike/unlike",{travelId:params.id,likerId:user.id},function (data) {
                            if (data.success){
                                click.removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                                click.css("color","black");
                            }
                        })
                    }
                }else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '亲,要点赞请先登录',
                        autoClose: 1500,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                    setTimeout(function () {
                        window.location.href="/login.html";
                    },1500)
                }
            })

            /*//!* 点赞按钮特效*
            $("#likeBtn").click(function(){


            });*/

        });
    </script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="createTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span>0 </span>篇游记
                    <span class="fans">0</span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i > 出发时间
                    <span render-html="travelTime" >2018-07-11</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex footer" align="center" >
        <!--点赞按钮-->
        <div class="p-2  flex-fill " id="zan">
            <i class="fa-2x fa fa-thumbs-o-up"  id="likeBtn" > </i>
        </div>
        <div class="p-2  flex-fill">
            <i class="fa-2x fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill star">
            <i class="fa-2x fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>



</body>

</html>